<script lang="ts" setup>
  import {
    getGameHandicapTotalScoreRankData,
    prepareGameRank,
  } from '@/api/game';
  import type { HandicapTotalScoreRankUser } from '@/types/game';
  import { onMounted, ref } from 'vue';

  const props = defineProps<{
    gameId: string;
  }>();

  const loading = ref(false);
  const list = ref<HandicapTotalScoreRankUser[]>([]);
  const refreshRankData = async () => {
    try {
      loading.value = true;
      const res = await getGameHandicapTotalScoreRankData(props.gameId);
      list.value = res.data.data || [];
    } finally {
      loading.value = false;
    }
  };

  onMounted(refreshRankData);

  const preparing = ref(false);

  const handlePrepare = async () => {
    try {
      preparing.value = true;
      await prepareGameRank(props.gameId, 1);
      refreshRankData();
    } finally {
      preparing.value = false;
    }
  };
</script>

<template>
  <a-card title="差点总杆" size="small">
    <template #extra>
      <a-button :loading="preparing" @click="handlePrepare"> 运行 </a-button>
    </template>
    <div v-for="g in ['A', 'B', 'C']" :key="g" style="margin-bottom: 30px">
      <div style="text-align: center; line-height: 30px">{{ g }}组</div>

      <table>
        <tr class="header">
          <td width="15%">排名</td>
          <td>球员</td>
          <td width="20%">微分成绩</td>
          <td width="15%">差点总杆</td>
          <td width="15%">积分</td>
        </tr>
        <tr
          v-for="item in list.filter((i) => i.groupType === g)"
          :key="item.userId"
        >
          <td>{{ item.rankIndex + 1 }}</td>
          <td>{{ item.user.nickname }}</td>
          <td>{{ item.handicapDiff }}</td>
          <td>{{ item.handicapScore }}</td>
          <td>{{ item.score }}</td>
        </tr>
      </table>
    </div>
  </a-card>
</template>

<style lang="less" scoped>
  table {
    width: 100%;
    border: 1px solid var(--color-border-2);
    border-collapse: collapse;
    color: var(--color-text-1);
  }

  td {
    padding: 5px;
    border-bottom: 1px solid var(--color-border-2);
  }

  .header {
    font-weight: bold;
  }
</style>
